<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img {
				width: 300px;
				filter: blur(5px);
			}
			img:hover {
				filter: blur(0);
			}
			.fater {
				width: 300px;
				height: 200px;
				background-color: goldenrod;
			}
			.son {
				width: calc(100% - 30px);
				height: 30px;
				border-color: #0000FF;
			}
		</style>
	</head>
	<body>
	<!-- 
	 (1)通过box-sizing来指定盒子模型
	 content-box:盒子大小为width+padding+border(以前默认的)
	 border-box:盒子大小为width
	 
	 (2)图片变模糊:filter:blur(单位为Px,数值越大越模糊)
	 
	 (3)calc()计算属性值
	 
	 -->
	 <img src="../../img/hai.jpg" >
	 <!-- 需求:子元素永远比父元素小30像素 -->
	 <div class="fater">
		 <div class="son"></div>
	 </div>
	</body>
</html>
